<template>
  <div class="nav-header">
    <!-- 是否折叠menu的按钮 -->
    <el-icon :size="30" class="fold-menu" @click="handleFoldMenu">
      <expand v-if="isFoldMenu" />
      <fold v-else />
    </el-icon>
    <!-- 面包屑 -->
    <bread-crumb class="breadCrumb" :breadCrumbs="breadCrumbs"></bread-crumb>
    <!-- userInfo -->
    <user-info></user-info>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

import userInfo from './nav-header-cpns/user-info.vue';
import breadCrumb, { IBreadCrumb } from '@/base-ui/breadCrumb/index';
import { pathMapBreadCrumbs } from '@/utils/mapMenus';

export default defineComponent({
  components: {
    userInfo,
    breadCrumb
  },
  emits: ['foldChange'],
  setup(props, { emit }) {
    const store = useStore();
    const route = useRoute();
    const isFoldMenu = ref(false);
    // 控制menu是否fold的按钮
    const handleFoldMenu = () => {
      isFoldMenu.value = !isFoldMenu.value; // 点击切换打开关闭menu侧边栏
      emit('foldChange', isFoldMenu.value); // 告诉父组件
    };

    // 面包屑的数据 -> 来自url的路径
    const breadCrumbs = computed(() => {
      const userMenu = store.state.loginModule.userMenu;
      const currentPath = route.path;
      return pathMapBreadCrumbs(userMenu, currentPath);
    });

    return {
      isFoldMenu,
      handleFoldMenu,
      breadCrumbs
    };
  }
});
</script>

<style scoped lang="less">
.nav-header {
  position: relative;
  .fold-menu {
    margin-top: 3px;
    cursor: pointer;
  }
  .breadCrumb {
    position: absolute;
    top: 0;
    left: 48px;
    height: 38px;
    line-height: 38px;
    font-size: 12px;
  }
}
</style>
